<template>
    <div class="user-login-container">
        <div class="user-login-bg"></div>
        <div class="user-login-inner">
            <div class="user-login-desc">
                <div class="text">
                    <span>Welcome</span>
                    <span>闲云野鹤后台管理系统</span>
                </div>
            </div>
            <div class="user-login-form">
                <el-divider> 欢迎登录 </el-divider>
                <el-form :model="form" status-icon :rules="rules" ref="formRef" size="large">
                    <el-form-item prop="account">
                        <el-input
                            placeholder="请输入用户名"
                            prefix-icon="User"
                            v-model="form.account"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input
                            type="password"
                            placeholder="请输入密码"
                            prefix-icon="Lock"
                            v-model="form.password"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item prop="captcha">
                        <div class="form-captcha">
                            <el-input placeholder="请输入验证码" v-model="form.captcha" clearable />
                            <div class="img" v-html="svgData" @click="getCaptcha()"></div>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            :disabled="loading"
                            type="primary"
                            style="width: 100%"
                            @click="submitForm"
                        >
                            {{ buttonName }}
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent, getCurrentInstance, ref, reactive } from 'vue';
import { login as Api } from 'api';

export default defineComponent({
    setup() {
        const { proxy } = getCurrentInstance();
        let loading = ref(false);
        let buttonName = ref('登陆');
        let svgData = ref(null);
        let form = reactive({
            account: '',
            password: '',
            captcha: ''
        });
        let rules = {
            account: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
            password: [
                { required: true, message: '密码不能为空', trigger: 'blur' },
                { min: 2, max: 16, message: '长度2到16个字符', trigger: 'change' }
            ],
            captcha: [
                { required: true, message: '验证码不能为空', trigger: 'blur' },
                { min: 4, max: 4, message: '长度4个字符', trigger: 'change' }
            ]
        };

        // 快捷键登陆
        const handleEvent = (e) => {
            if (e.keyCode == 13) {
                if (loading.value) return proxy.$msg.warning('操作不能太急');
                // 登录
                submitForm();
            }
        };
        // 更新验证码
        const getCaptcha = async () => {
            const { code, svgData: data } = await proxy.$http.get(Api.captcha);
            if (code === 200) svgData.value = data;
        };
        // 提交表单登陆
        const submitForm = async () => {
            //表单验证
            await proxy.$refs['formRef'].validate((valid) => {
                if (valid) {
                    countdown();
                }
            });

            if (loading.value) {
                const { code, data, msg } = await proxy.$http.post(Api.userLogin, {
                    user_account: form.account,
                    user_password: form.password,
                    captcha: form.captcha
                });

                if (code === 200) {
                    proxy.$storage.set('token', data.token);
                    proxy.$msg.success(msg);
                    // 销毁快捷键监听
                    document.removeEventListener('keydown', handleEvent);

                    setTimeout(() => window.location.reload());
                } else {
                    proxy.$msg.error(msg);
                }
            }
        };
        // 等待倒计时,防止连续点击登陆操作
        const countdown = () => {
            loading.value = true;
            let time = 30;
            buttonName.value = `(${time})秒重新登陆`;

            const interval = window.setInterval(() => {
                time -= 1;
                buttonName.value = `(${time})秒重新登陆`;
                if (time <= 0) {
                    buttonName.value = '登陆';
                    loading.value = false;
                    window.clearInterval(interval);
                }
            }, 1000);
        };

        getCaptcha();
        // 监听快捷键
        document.addEventListener('keydown', handleEvent);

        return {
            loading,
            buttonName,
            svgData,
            form,
            rules,
            getCaptcha,
            submitForm
        };
    }
});
</script>

<style lang="less" scoped>
.user-login-container {
    height: 100vh;
    position: relative;

    .user-login-bg {
        height: 100%;
        background-image: linear-gradient(
            180deg,
            #186685,
            #1f6874,
            #246f9f,
            #267295,
            #36cee7,
            #53b7d5
        );
    }

    .user-login-inner {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 400px;
        width: 1000px;
        display: flex;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border-radius: 8px;

        .user-login-desc {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;

            .text {
                text-align: center;

                span {
                    display: block;
                    font-size: 36px;
                    line-height: 45px;
                    font-weight: bold;
                    color: #fff;
                    white-space: nowrap;
                }
            }

            &::before {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                background: #fff;
                opacity: 0.3;
                z-index: -1;
                border-top-left-radius: 8px;
                border-bottom-left-radius: 8px;
            }
        }

        .user-login-form {
            flex: 1;
            background: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;

            .el-divider {
                width: 65%;
            }

            .el-form {
                width: 320px;

                .form-captcha {
                    display: flex;
                    align-items: center;

                    .img {
                        width: 130px;
                        height: 40px;
                        margin-left: 20px;
                    }
                }
            }
        }
    }
}
</style>
